<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <div class="form-setting-group form-common-setting">
      <h3 class="form-setting-panel-title">{{ field.displayName }}</h3>
      <div class="form-design-warning">{{$t('common.form.preview.materialReturn.tip1')}}</div>
    </div>
    <!-- end 标题 -->
    
    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      :mode="mode"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->
    
    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <!-- 必填 -->
      <!-- <div class="form-item-box">
        <form-required-setting :field="field" @input="update"></form-required-setting>
      </div> -->
    </div>
    <!-- end 校验 -->

    <!-- start 物料关联显示字段 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{ $t('common.form.preview.material.label2') }}</h4>
      <div class="form-item-box">
        <div class="form-setting-item">
          <el-select
            class="material-select"
            v-model="selectMaterial"
            value-key="fieldName"
            multiple
            :multiple-limit="10"
          >
            <el-option
              v-for="item in materialFieldOptions"
              :key="item.fieldName"
              :label="item.displayName"
              :value="item"
              :disabled="checkFieldDisabledHandler(item)"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!-- end 物料关联显示字段 -->

    <!-- 返还规则 start -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.otherSet')}}</h4>
      <div class="form-item-box">
        <!-- {{field}}1 -->
        <el-checkbox :value="field.setting.expiredMaterialReturnCheck" @input="updateSetting(...arguments,'expiredMaterialReturnCheck')">
          {{$t('task.tip.receiptTip5')}}
        </el-checkbox>
        <el-checkbox :value="field.setting.unexpiredMaterialReturnCheck" @input="updateSetting(...arguments,'unexpiredMaterialReturnCheck')">
          {{$t('task.tip.receiptTip6')}}
        </el-checkbox>
        <el-checkbox :value="field.setting.writtenOffMaterialReturnCheck" @input="updateSetting(...arguments,'writtenOffMaterialReturnCheck')">
          {{$t('task.tip.zhongQireceiptTip')}}
        </el-checkbox>
        <el-checkbox :value="field.setting.returnUnusedCheck" @input="updateSetting(...arguments,'returnUnusedCheck')">
          {{$t('common.form.tip.materialReturn.validateTip1')}}
        </el-checkbox>
        <el-checkbox v-if="isAreaPrice" :value="field.setting.useRegionalPricing" @input="updateSetting(...arguments,'useRegionalPricing')">
          {{$t('common.base.useRegionalPricing')}}
        </el-checkbox>
        
        
      </div>

      <!-- 返还后是否将工单对应的产品禁用 start-->
      <div class="form-item-box">
        <el-checkbox :value="field.setting.productDisable" @input="updateSetting(...arguments,'productDisable')">
          {{$t('common.form.tip.materialReturn.productDisable')}}
          <el-tooltip  placement="top" popper-class="form-msg-setting-tooltip">
            <div slot="content">
              <div class="tooltip">{{$t('common.form.tip.materialReturn.productDisableTips1')}}</div>
            </div>
            <i class="iconfont icon-question"></i>
          </el-tooltip>
        </el-checkbox>
      </div>
      <!-- 返还后是否将工单对应的产品禁用 end-->

      <!-- 是否需要二次确认 本期不展示 start-->
      <div class="form-item-box" v-if="false">
        <el-checkbox :value="field.setting.reconfirm" @input="updateSetting(...arguments, 'reconfirm')">
          {{$t('common.form.tip.materialVerifyEliminate.reconfirm')}}
        </el-checkbox>
      </div>
      <!-- 是否需要二次确认 end-->

      <!-- 二次确认表单字段 start-->
      <div v-if="field.setting.productDisable" class="form-setting-group form-setting-item">
        <h4 class="form-item-title">{{$t('common.form.tip.materialVerifyEliminate.reconfirmTitle')}}</h4>
        <el-select
          class="form-material-verify-select"
          :value="reconfirmValue(field)"
          multiple
          @change="reconfirmColumsHandler"
        >
          <el-option
            v-for="item in reconfirmColums"
            :key="item.field"
            :label="item.label"
            :value="item.field"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </div>
      <!-- 二次确认表单字段 end-->

    </div>
    <!-- 返还规则 end -->
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import { settingProps } from '@src/component/form/components/props';
import { getRootWindow } from '@src/util/dom';

// util
import { findComponentUpward } from '@src/util/assist';
import * as FormUtil from '@src/component/form/util';

export default {
  name: 'form-materialreturn-setting',
  mixins: [SettingMixin],
  props: settingProps,
  data() {
    return {
      fixedFieldValues: ['name', 'serialNumber', 'catalogId'],
    }
  },
  computed: {
    reconfirmColums() {
      return [
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel1'), field: 'name', disabled: true, width: 100},
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel2'), field: 'serialNumber', disabled: true, width: 100 },
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel3'), field: 'catalogId', disabled: true, width: 100 },
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel4'), field: 'customer' },
        // { label: this.$t('common.form.tip.materialReturn.reconfirmLabel5'), field: 'qualityStatus' },
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel6'), field: 'qualityStartTime', width: 200 },
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel7'), field: 'qualityEndTime',width: 200 }
      ]
    },
    // 是否开启区域定价灰度
    isAreaPrice() {
      const RootWindow = getRootWindow(window)
      return RootWindow.grayAuth?.areaPrice
    },
    // 关联物料下拉框数据
    materialFieldOptions() {
      let { materialFiels } = findComponentUpward(this, 'form-design') || [];

      return FormUtil.toFormField(materialFiels?.filter(item => !['logistics'].includes(item?.setting?.originalFormType)));
    },
    materialFields() {
      return this.field?.setting?.materialFields || [];
    },
    selectMaterial: {
      get() {
        return this.materialFields;
      },
      set(value) {
        this.updateSetting(value, 'materialFields');
      },
    }
  },
  methods: {
    updateForDom(event){
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;
      
      this.update(value, prop)
    },
    reconfirmValue(field){
      const selectVal = field?.setting?.showFields?.map(x => x.field) || []
      return [...new Set([...this.fixedFieldValues, ...selectVal])]
    },
    reconfirmColumsHandler(val) {
      const selectField = this.reconfirmColums.filter(x => val.some(v => v === x.field))
      this.updateSetting(selectField, 'showFields')
    },
    update(value, prop, isSetting = false) {
      if(value){
        this.$set(this.field.setting, 'expiredMaterialReturnCheck', false)
        this.$set(this.field.setting, 'unexpiredMaterialReturnCheck', false)
        this.$set(this.field.setting, 'writtenOffMaterialReturnCheck', false)
      }
      this.$emit('input', {value, prop, isSetting});
    },
    // 更新setting
    updateSetting(value, type){
      this.$set(this.field.setting, type, value)
    },
    // 初始化物料关联显示字段
    initRelationFields() {
      // 无值时设置默认值
      if (!this.selectMaterial.length) {
        let fields = this.materialFieldOptions.filter(field =>
          this.checkFieldDisabledHandler(field)
        );
        this.selectMaterial = fields;
        return fields;
      }

      // 有值时需过滤掉已被删除的关联显示字段
      let materialFieldValue = this.selectMaterial.filter(item => {
        let index = this.materialFieldOptions.findIndex(
          field => item.fieldName === field.fieldName
        );
        return index > -1;
      });

      return materialFieldValue;
    },
    // 物料编号, 物料名称默认选中，禁止点击
    checkFieldDisabledHandler(field) {
      const fieldNameArr = ['sn', 'name'];
      let fieldName = field.fieldName;

      return fieldNameArr.includes(fieldName);
    },
  },
  mounted() {
    if(!this.field?.setting?.showFields?.length){
      this.reconfirmColumsHandler(this.fixedFieldValues)
    }
    this.selectMaterial = this.initRelationFields();
  }
}
</script>
<style lang="scss" scoped>
.form-material-verify-select {
  width: 100%;
}

.material-select {
  width: 100%;
  ::v-deep .el-tag:nth-child(1),
  ::v-deep .el-tag:nth-child(2) {
    .el-tag__close {
      display: none;
    }
  }
}
</style>